<template>
	<view class="orderDishes">
		<u-toast ref="uToast" />
		<u-select v-model="show" :list="list" :safe-area-inset-bottom="true" @confirm="confirm"></u-select>
		<view class="dishes-operation">
			<view v-for="(item, index) in orderOperation" :key="index" @click="refresh(index)">
				<image :src="item.imgUrl" :style="{transform:index==2?'rotate('+deg+'deg)':'',transition:'0.5s'}"></image>
				<view>{{ item.value }}</view>
			</view>
		</view>
		<scroll-view class="scroll" :style="'height:' + sHeight" scroll-y="true" :scroll-into-view="goId"
		 scroll-with-animation="true">
			<view class="dishes-list" v-for="(item,index1) in dishesData" :key="index1" :id="'test'+index1">
				<!-- <view>—— 精选主菜 ——</view> -->
				<view>——{{item[0]}}——</view>
				<view>
					<view v-for="(item, index) in item[1]" :key="index" style="box-shadow:0px 0px 7upx 0px rgba(83,83,83,0.15);">
						<!-- <image :src="item.imgurl" @tap="godetail(item._id)"></image> -->
						<u-image :src="item.imgurl" width="100%" height="215rpx" @tap="godetail(item._id)" :border-radius="10" :fade="true">
							<u-loading slot="loading"></u-loading>
						</u-image>
						<span @tap="godetail(item._id)" style="white-space: nowrap ;text-overflow: ellipsis;overflow:hidden;display:inline-block;width:100%; ">{{ item.name }}</span>
						<view>
							<text>￥{{ item.nowprice }}</text>
							<image @click="handleSelect(item, $event)" src="../../static/ic_add@2x.png" />
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<drawer @on-click="handleGoId" :dishdata="this.dishesData"></drawer>
		<!-- 悬浮购物车 -->
		<view v-show="!infoVisible==true" :class="['dishes-info', { 'dishes-info-zIndex': infoVisible&&!show }]" style="position: fixed;bottom: 10rpx;">
			<view>
				<text>￥</text>
				<text>{{ orderData.money }}</text>
			</view>
			<view @click="handleSubmit">提交订单</view>
			<view @click="handlePopup">
				<text v-if="orderData.count > 0">{{ orderData.count }}</text>
				<image src="../../static/ic_order@2x.png"></image>
			</view>
		</view>
		<!-- end -->
		<!-- 弹出框 -->
		<popup :isVisible.sync="infoVisible">
			<view class="dishes-detail">
				<view>
					<text @click="selectdesk(tabledetail.tablenumber)">{{tabledetail.tablenumber||'请选择桌号'}}</text>
					<template>
						<!-- <u-select v-model="show" :list="list" :safe-area-inset-bottom="true" @confirm="confirm"></u-select> -->
						<!-- <u-picker mode="selector" v-model="show" :default-selector="[0]" :range="selectorObj" range-key="cateName"></u-picker> -->
					</template>
					<view>
						<image src="../../static/ic_clear@2x.png"></image>
						<text @click="CLEAN_DISHES">清空购物车</text>
					</view>
				</view>
				<view class="dishes">
					<view v-for="(item, index) in orderList" :key="index">
						<image :src="item.imgurl"></image>
						<view>
							<text>{{ item.name }}</text>
							<view>{{ item.type }}</view>
							<view>
								<text>￥</text>
								<text>{{ item.nowprice }}</text>
							</view>
						</view>
						<view>
							<text @click="handleDel(item)">-</text>
							<text>{{ item.count }}</text>
							<image src="../../static/ic_add@2x.png" @click="handleAdd(item)"></image>
						</view>
					</view>
				</view>
			</view>
		</popup>
		<!-- end
		<!-- 添加菜品 -->
		<popup position="center" width="600rpx" borderRadius="10rpx" :isVisible.sync="typeVisible">
			<view class="orderDishes-type">
				<view v-if="selectDishes">
					<!-- <image :src="selectDishes.imgurl"></image> -->
					<u-image :src="selectDishes.imgurl" width="190" height="125" :border-radius="10"></u-image>
					<view>
						<view>{{ selectDishes.name }}</view>
						<view>￥{{ selectDishes.nowprice }}</view>
					</view>
				</view>
				<checkBox ref="box" v-for="(item, index) in typeList" :key="index" :data="item.child" :value="type[index]" :title="item.name"
				 name="value" id="value"></checkBox>
				<text v-if="typeList.length==0">该菜品暂无规格可选</text>
			</view>
			<view class="orderDishes-add" @click="handleAdd(false)">加入购物车</view>
		</popup>
		<!-- 贝塞尔曲线 -->
		<view :class="['pAnimate',pAnimate]" ref="pAnimate">
			<image :class="cAnimate" ref="cAnimate" src="../../static/ic_add@2x.png" style="width: 30rpx;height:30rpx;" />
		</view>
	</view>
</template>

<script>
	import popup from '../../components/popup.vue';
	import drawer from '../../components/drawer.vue';
	import checkBox from '../../components/checkBox.vue';
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		components: {
			popup,
			drawer,
			checkBox
		},
		data() {
			return {
				account: '',
				deg: 0,
				selectorObj: [{
						cateName: '1',
						id: 1
					},
					{
						cateName: '2',
						id: 2
					}
				],
				desknumber: '',
				show: false,
				list: [{
						value: '1',
						label: '1号桌'
					},
					{
						value: '2',
						label: '2号桌'
					}
				],
				goId: null,
				value: null,
				sHeight: null,
				pAnimate: null,
				cAnimate: null,
				selectDishes: null,
				infoVisible: false,
				typeVisible: false,
				type: [],
				typeList: [],
				dishesData: [],
				orderOperation: [{
						value: "随便点",
						imgUrl: "../../static/ic_01@2x.png"
					},
					{
						value: "菜品分类",
						imgUrl: "../../static/ic_02@2x.png"
					},
					{
						value: "刷新",
						imgUrl: "../../static/refresh.png"
					}
				]
			};
		},
		onShow() {
			this.account = JSON.parse(uni.getStorageSync('currentUser')).account
			// if(uni.getStorageSync('orderList')){
			// 	uni.setStorageSync(this.account+'orderList',uni.getStorageSync('orderList'))
			// }
			let aa = uni.getStorageSync(this.account + 'orderList') ? JSON.parse(uni.getStorageSync(this.account + 'orderList')) :
				[]
			let bb = uni.getStorageSync(this.account + 'orderData') ? JSON.parse(uni.getStorageSync(this.account + 'orderData')) :
				{
					count: 0,
					money: 0
				}
			this.SET_ORDERLIST(aa)
			this.SET_ORDERDATA(bb)
			if(this.orderList.length == 0 && this.tabledetail.tablenumber != undefined){
			this.$u.post('/table/getTableByaccount', {
				account: this.account,
			}).then(res => {
				if (res.data.data == null) {
					console.log('执行了');
					this.CLEAN_TABLE()
					uni.removeStorageSync(this.account+'tablerecords')
					uni.removeStorageSync(this.account+'vuexstate')
				}
				// if (res.data.msg == -1) {
				// 	console.log('执行了');
				// 	this.CLEAN_TABLE()
				// 	uni.removeStorageSync('tablerecords')
				// 	uni.removeStorageSync('vuexstate')
				// }
			})
			}
			if (this.orderList.length == 0 && this.tabledetail.tablenumber != undefined && uni.getStorageSync('ordernum') !=
				undefined) {
				this.checktable()
			}

		},
		computed: {
			...mapState(['orderList', 'orderData', 'tabledetail']),
			...mapGetters(['getorderlist'])
		},
		created() {
			this.account = JSON.parse(uni.getStorageSync('currentUser')).account
			this.getdishdata()
		},
		mounted() {
			uni.getSystemInfo({
				success: res => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('.scroll')
						.boundingClientRect(data => {
							this.sHeight = res.windowHeight - data.top + 'px';
						})
						.exec();
				}
			});
		},
		methods: {
			getorderstatus() {
				let orderdetail = uni.getStorageSync(this.account + 'ordernum')
				this.$u.post('/order/getOrderStatus', {
					ordernumber: orderdetail
				}).then(res => {
					console.log(res, '获取到的订单状态');
					if (res.data.msg.status == '4') {
						this.CLEAN_TABLE()
						uni.removeStorageSync(this.account+'tablerecords')
						uni.removeStorageSync('vuexstate')
						// this.CLEAN_DISHES()
						uni.removeStorageSync('ordernum')
					}
				})
			},
			checktable() {
				this.$u.post('/table/checktable', {
					account: this.account,
					name: this.tabledetail.tablenumber
				}).then(res => {
					if (res.data.msg == -1) {
						this.getorderstatus()

					}
				})
			},
			refresh(index) {
				if (index == 2) {
					this.getdishdata()
					this.deg = 360
					setTimeout(() => {
						this.deg = 0
						this.$refs.uToast.show({
							title: '刷新成功',
							type: 'success',
							duration: 1000,
							position: "top"
						})
					}, 500)
				}
			},
			godetail(id) {
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '../detail/detail?id=' + id,
					animationType: 'pop-in',
					animationDuration: 200
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '../detail/detail'
				})
				// #endif
			},
			getdishdata() {
				this.$u.post('/dishes/getAllDish').then(res => {
					this.dishesData = res.data.data
				})
			},
			confirm(e) {
				this.desknumber = e[0].label
			},
			selectdesk(val) {
				// this.show = true
				// if(!val){
				uni.navigateTo({
					url: '../index/table'
				})
				// }
			},
			...mapActions(['CHANGE_COUNT', 'CLEAN_DISHES']),
			...mapMutations(['CLEAN_TABLE', 'SET_ORDERLIST', 'SET_ORDERDATA']),
			handleSubmit() {
				if (this.orderList.length > 0) {
					if (this.tabledetail.tablenumber != undefined) {
						uni.navigateTo({
							url: '../checkorder/checkorder'
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请选择桌位！'
						});
					}

				} else {
					uni.showToast({
						icon: 'none',
						title: '至少选一样菜哦！'
					});
				}
				this.pAnimate = null;
				this.cAnimate = null;
			},
			handleSelect(row, event) {
				this.selectDishes = row;
				this.typeList = row.options[0].child
				this.typeVisible = true;
				if (this.typeList.length != 0) {
					this.$refs.box.map((item, index) => {
						this.$refs.box[index].value = '';
					});
				}

				this.pAnimate = null;
				this.cAnimate = null;
			},
			handleDel(row) {
				this.CHANGE_COUNT({
					row: row,
					type: false
				});
			},
			handleAdd(row) {
				this.pAnimate = 'orderDishes-pAnimate';
				this.cAnimate = 'orderDishes-cAnimate';
				if (this.typeList.length != 0) {
					this.type = this.$refs.box.map((item, index) => {
						return this.$refs.box[index].value;
					});
				}

				setTimeout(() => {
					if (!row) {
						row = {
							count: 1,
							...this.selectDishes,
							type: this.type.filter(Boolean).join('、')
						};
						this.pAnimate = null
						this.cAnimate == null
					}
					this.pAnimate = null
					this.cAnimate == null
					this.CHANGE_COUNT({
						row: row,
						type: true
					});
				}, 500);

				this.typeVisible = false;
			},
			handlePopup() {
				this.infoVisible = !this.infoVisible;
			},
			handleGoId(id) {
				this.$nextTick(() => {
					this.goId = id
				})
				setTimeout(() => {
					this.goId = null;
				}, 200);
			}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/ .popup,
	.popup-open {
		z-index: 998;
	}

	.dishes-info-zIndex {
		z-index: 1002;
		bottom: 55%;
	}

	.orderDishes {
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.dishes-operation {
		height: 100rpx;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 16rpx;
		margin-bottom: 20rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		&>view {
			flex: 1;
			height: 100%;
			border-right: 1rpx solid #e0e0e0;
		}

		&>view:last-child {
			border: none;
		}
	}

	.dishes-list {
		&>view:nth-child(1) {
			text-align: center;
			padding-bottom: 20rpx;
		}

		&>view:nth-child(2) {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			&>view:nth-child(3n+1) {
				margin-left: 20rpx;
			}

			&>view {
				width: 31%;
				background: #fff;
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				margin-right: 9rpx;
				overflow: hidden;

				&>image {
					height: 200rpx;
					// height: 100%;
					width: 100%;
				}

				&>text {
					padding: 10rpx;
				}

				&>view {
					padding: 10rpx;

					text {
						color: red;
					}

					image {
						width: 30rpx;
						height: 30rpx;
						float: right;
					}
				}
			}
		}
	}

	.dishes-list:last-child {
		margin-bottom: 100rpx;
	}

	.dishes-info {
		position: fixed;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		text-align: center;
		width: 500rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		transition: all 0.3s;

		&>view:nth-child(1) {
			flex: 2;
			background-color: red;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			background-color: #292323;

			text:nth-child(1) {
				font-size: 26rpx;
				padding-left: 30rpx;
			}

			text:nth-child(2) {
				font-size: 36rpx;
			}
		}

		&>view:nth-child(2) {
			border-top-right-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			background-color: #ffc107;
			flex: 1;
		}

		&>view:nth-child(3) {
			position: absolute;
			top: -8rpx;
			left: 45rpx;
			background: orange;
			height: 90rpx;
			width: 80rpx;
			border-radius: 20px 20px 0px 0px;
			display: flex;
			align-items: center;
			justify-content: center;

			&::before {
				content: '';
				width: 90rpx;
				height: 8rpx;
				background-color: orange;
				position: absolute;
				bottom: -2rpx;
				border-radius: 40rpx;
				z-index: -1;
			}

			text {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				position: absolute;
				top: -8rpx;
				right: -4rpx;
				background-color: #f44336;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			image {
				width: 45rpx;
				height: 45rpx;
				filter: brightness(0) invert(1);
			}

			uni-image {
				filter: brightness(0) invert(1);
			}
		}
	}

	.dishes-detail {
		&>view:nth-child(1) {
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #ccc;
			padding: 0rpx 30rpx;

			text {
				font-size: 28rpx;
			}

			view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					padding-right: 4rpx;
				}
			}
		}

		.dishes {
			height: calc(50vh - 120rpx);
			overflow-y: auto;

			&>view {
				display: flex;
				padding: 25rpx 25rpx 0rpx 25rpx;
				align-items: center;

				&>image {
					width: 125rpx;
					height: 125rpx;
					border-radius: 10rpx;
					background-color: red;
					margin-right: 20rpx;
				}

				&>view:nth-child(2) {
					font-size: 30rpx;

					&>view:nth-child(2) {
						font-size: 26rpx;
						color: #ccc;
						padding: 10rpx 0rpx;
					}

					&>view:nth-child(3) {
						color: red;

						text:nth-child(1) {
							font-size: 22rpx;
						}
					}
				}

				&>view:nth-child(3) {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					&>text:nth-child(1) {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 28rpx;
						color: #000;
						border: 1px solid #e5e5e5;
					}

					&>text:nth-child(2) {
						padding: 0rpx 20rpx;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}

	.orderDishes-type {
		padding: 40rpx;
		max-height: calc(100% - 160rpx);
		overflow: scroll;

		&>view:nth-child(1) {
			display: flex;
			align-items: center;
			padding-bottom: 30rpx;

			image {
				width: 140rpx;
				height: 125rpx;
				border-radius: 10rpx;
			}

			&>view {
				font-size: 30rpx;
				padding-left: 20px;

				&>view:nth-child(2) {
					font-size: 26rpx;
					padding-top: 30rpx;
					color: red;
				}
			}
		}
	}

	.orderDishes-add {
		color: #ffffff;
		height: 75rpx;
		background-color: red;
		line-height: 75rpx;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	.pAnimate {
		width: 30rpx;
		height: 30rpx;
		opacity: 0;
		z-index: -1;
		position: fixed;
		left: 50%;
		bottom: 510rpx;
	}

	.orderDishes-pAnimate {
		animation: pAnimate cubic-bezier(0, 0, 0, 0) 0.5s;
	}

	.orderDishes-cAnimate {
		animation: cAnimate cubic-bezier(0.14, -1.33, 1, 0.18) 0.5s;
	}

	@keyframes pAnimate {
		from {
			opacity: 1;
			z-index: 9;
			transform: translateX(0);
		}

		to {
			opacity: 1;
			transform: translateX(-165rpx);
		}
	}

	@keyframes cAnimate {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(300rpx);
		}
	}
</style>
